<template>
    <!-- 柱状图容器 -->
    <div class="echart" ref="mychart3" id="mychart3" :style="{
        width: '100%',
        height: '100px',
        marginBottom: '5px',
        border: '1px solid #efefef',
        borderRadius: '5px',
    }"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'BarIndex',
    data() {
        return {
            myChart3: [],
        }
    },
    mounted() {
        const myChart3 = echarts.init(this.$refs.mychart3);
        this.myChart3 = myChart3;
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                },
            },
            xAxis: {
                type: 'category',
                boundaryGap: true, // 坐标轴两边留白策略
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            },
            yAxis: {
                show: false,
            },
            // 图例
            series: [{
                name: '支付笔数',
                type: 'bar',
                color: '#409eff',
                data: [20, 50, 35, 15, 48, 22, 28, 10],
            }],
            grid: {
                left: 5,
                top: 5,
                right: 15,
                bottom: 20
            },
        };
        myChart3.setOption(option);
        window.addEventListener('resize', () => {
            myChart3.resize();
        });
        
    }
}
</script>

<style></style>